<template>
	<view v-if="info" class="u-padding-20"
		style="background: linear-gradient( 180deg, #E0F4FF 0%, #F8F9F9 100%);min-height: 100vh;">
		<view class="u-font-weight u-font-16 u-margin-bottom-40">欢迎管理这家门店</view>


		<view @click="show = true" class="u-flex u-row-between  " style="color: #000;">
			<view>
				{{date}}
			</view>
			<view>
				<u-icon name="calendar-fill" size="40"></u-icon>
			</view>
		</view>


		<view class="u-flex u-row-around u-margin-top-40"
			style="padding: 30rpx 0; line-height: 70rpx; background: #4F8BFF;border-radius: 10rpx;color: #fff;">

			<view>
				<view>营业额（元）</view>
				<view class="u-font-40 u-font-weight">{{info.rechargeMoney}}</view>
			</view>
			<view>
				<view>订单数（笔）</view>
				<view class="u-font-40 u-font-weight">{{info.orderNum}}</view>
			</view>
		</view>

		<view class="u-margin-top-40">
			<view class="u-font-weight u-font-30">营收统计</view>
			<view style="color: #999999;margin-top: 10rpx;">门店营收订单情况统计</view>
		</view>
		
		
		


		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		
		
		<view class="u-margin-top-40">
			<view class="u-font-weight u-font-30">营收统计</view>
			<view style="color: #999999;margin-top: 10rpx;">门店营收情况统计</view>
		</view>
		
		<view class="u-margin-top-20"></view>
		<view  class="u-flex u-row-between u-padding-20" style="background:#ffff;width: 700rpx;">
			<view class="u-flex">
				<image style="width: 48rpx;height: 48rpx;"  src="/static/shouru.png"></image>
				<view class="u-margin-left-20">
					<view class="u-font-weight">
						抖音团购收入
					</view>
					<view class="u-type-info">
						{{date}}
					</view> 
				</view>
			</view>
			<view style="color: #4F8BFF;">
				{{infoData.douyin.money}}
				<!-- res.meituan.money,res.douyin.money, res.card.money, res.online.money, res.shouhuoji.money -->
			</view>
		</view>
		<view class="u-margin-top-20"></view>
		<view  class="u-flex u-row-between u-padding-20" style="background:#ffff;width: 700rpx;">
			<view class="u-flex">
				<image style="width: 48rpx;height: 48rpx;"  src="/static/shouru.png"></image>
				<view class="u-margin-left-20">
					<view class="u-font-weight">
						美团团购收入
					</view>
					<view class="u-type-info">
						{{date}}
					</view> 
				</view>
			</view>
			<view style="color: #4F8BFF;">
				{{infoData.meituan.money}}
				<!-- res.meituan.money,res.douyin.money, res..money, res.online.money, res.shouhuoji.money -->
			</view>
		</view>
		<view class="u-margin-top-20"></view>
		<view  class="u-flex u-row-between u-padding-20" style="background:#ffff;width: 700rpx;">
			<view class="u-flex">
				<image style="width: 48rpx;height: 48rpx;"  src="/static/shouru.png"></image>
				<view class="u-margin-left-20">
					<view class="u-font-weight">
						会员卡售卖
					</view>
					<view class="u-type-info">
						{{date}}
					</view> 
				</view>
			</view>
			<view style="color: #4F8BFF;">
				{{infoData.card.money}}
				<!-- res.meituan.money,res.douyin.money, res.card.money, res.online.money, res.shouhuoji.money -->
			</view>
		</view>
		<view class="u-margin-top-20"></view>
		<view  class="u-flex u-row-between u-padding-20" style="background:#ffff;width: 700rpx;">
			<view class="u-flex">
				<image style="width: 48rpx;height: 48rpx;"  src="/static/shouru.png"></image>
				<view class="u-margin-left-20">
					<view class="u-font-weight">
						线上收益
					</view>
					<view class="u-type-info">
						{{date}}
					</view> 
				</view>
			</view>
			<view style="color: #4F8BFF;">
				{{infoData.online.money}}
				<!-- res.meituan.money,res.douyin.money, res.card.money, res.online.money, res.shouhuoji.money -->
			</view>
		</view>
		<view class="u-margin-top-20"></view>
		<view  class="u-flex u-row-between u-padding-20" style="background:#ffff;width: 700rpx;">
			<view class="u-flex">
				<image style="width: 48rpx;height: 48rpx;"  src="/static/shouru.png"></image>
				<view class="u-margin-left-20">
					<view class="u-font-weight">
						售货柜
					</view>
					<view class="u-type-info">
						{{date}}
					</view> 
				</view>
			</view>
			<view style="color: #4F8BFF;">
				{{infoData.shouhuoji.money}}
				<!-- res.meituan.money,res.douyin.money, res.card.money, res.online.money, res.shouhuoji.money -->
			</view>
		</view>

		<u-calendar v-model="show" mode="range" @change="changeDate"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				date: '',
				show: false,
				info: '',
				infoData:"",
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		methods: {
			changeDate(e) {
				var {
					endDate,
					startDate
				} = e;
				const date = startDate + ' ' + '-' + ' ' + endDate
				this.date = date;
				this.orderStatistics(date)
			},
			orderStatistics(date) {
				this.$u.post('/alliance/orderStatistics', {
					store_id: this.id,
					date: this.date
				}).then(res => {
					var {
						orderNum,
						rechargeMoney,
						expenseMoney,
						earningsMoney,
						offlineMoney,
						passengerFlow,
						onlineMoney,
						balanceMoney
					} = res;
					this.info = res;
				}).catch(err => {

				})
			},
			getDetail() {
				this.$u.post('/alliance/storeData', {
					store_id: this.id
				}).then(res => {
					
					let datas = {
						categories: ["美团", "抖音", "会员卡", "线上", "售货柜"],
						series: [{
								name: "营业额",
								data: [res.meituan.money,res.douyin.money, res.card.money, res.online.money, res.shouhuoji.money]
							},
							{
								name: "订单量",
								data: [res.meituan.num,res.douyin.num, res.card.num, res.online.num, res.shouhuoji.num]
							}
						]
					}
					this.chartData = JSON.parse(JSON.stringify(datas));
					
					this.infoData=res;
				}).catch(err => {})
			},
		},
		onLoad(options) {
			let timestamp = Math.round(new Date() / 1000);
			let date = this.$u.timeFormat(timestamp, 'yyyy-mm-dd') + ' ' + '-' + ' ' + this.$u.timeFormat(timestamp,
				'yyyy-mm-dd');
			this.date = date;

			if (options.id) {
				this.id = options.id;
				this.orderStatistics()
				this.getDetail();

			}



		}
	}

	// /
</script>

<style>
</style>